<template>
    <div class="login flex-col--c pl46 pr46">
        <image class="mt88" style="width: 188px" mode="widthFix" src="/static/loginlogo.png"></image>
        <view class="form-box mt60">
            <u-form
                labelPosition="left"
                :model="form"
                ref="form"
                :rules="rules"
            >
                <u-form-item
                    prop="phone"
                    borderBottom
                >
                    <view class="form-item-box flex-row--c">
                        <u-image class="mr24" width="20" height="20" src="/static/my.png"></u-image>
                        <u-input
                            type="text"
                            v-model="form.phone"
                            placeholder="账号"
                            border="none"
                        ></u-input>
                    </view>
                </u-form-item>
                <u-form-item
                    prop="password"
                    borderBottom
                >
                    <view class="form-item-box flex-row-c-c">
                        <u-image class="mr24" width="20" height="20" src="/static/lock.png"></u-image>
                        <u-input
                            :type="showPassword ? 'text' : 'password'"
                            v-model="form.password"
                            placeholder="密码"
                            border="none"
                        ></u-input>
                        <text class="saasIcon font30 pr20" style="color:#C8C9CC;" @click="showPassword=!showPassword">{{
                                showPassword ? '\ue6cf' : '\ue6d0'
                            }}
                        </text>
                    </view>
                </u-form-item>
                <u-form-item
                    prop="code"
                    borderBottom
                >
                    <view class="form-item-box flex-row-c-c">
                        <view class="mr24" style="width:20px;height:20px">
                        </view>
                        <u-input
                            type="text"
                            v-model="form.code"
                            placeholder="请输入验证码"
                            border="none"
                        ></u-input>
                        <u-button shape="circle" size="mini" color="#4AB26A"
                                  :customStyle="{height:'48rpx',width:'160rpx',fontSize:'23rpx'}"
                                  @click="getCode"
                                  v-if="!codeDetails.img">
                            获取验证码
                        </u-button>
                        <image style="width:160rpx" :src="'data:image/jpg;base64,'+codeDetails.img" mode="widthFix" @click="getCode" v-else></image>
                    </view>

                </u-form-item>
            </u-form>
        </view>

        <view class="btn mt46">
            <u-button shape="circle" color="#4AB26A" :customStyle="{height:'84rpx'}" @click="submit">登录</u-button>
        </view>

        <view class="chat flex-row-c-c">联系客服：4009-6868-99</view>
    </div>
</template>

<script>
const isDev = process.env.NODE_ENV === "development"
export default {
    name: "login",
    data() {
        return {
            showPassword: false,
            codeDetails: {},
            form: {
                phone: isDev ? 'admin' : '',
                password: isDev ? 'admin123' : '',
                // phone: isDev ? 'lisi' : '',
                // password: isDev ? '1234567890' : '',
                code: ''
            },
            rules: {
                phone: [
                    {
                        required: true,
                        message: '请输入手机',
                        trigger: ['blur', 'change']
                    }
                ],
                password: [
                    {
                        required: true,
                        message: '请输入密码',
                        trigger: ['blur', 'change']
                    }
                ],
                code: [
                    {
                        required: true,
                        message: '请输入验证码',
                        trigger: ['blur', 'change']
                    }
                ]
            }
        };
    },
    created() {
    },
    methods: {
        submit() {
            this.$refs.form.validate().then(async (res) => {
                const {code, data} = await this.$api.shop.user.login({
                    "code": this.form.code,
                    "password": this.form.password,
                    "username": this.form.phone,
                    "uuid": this.codeDetails.uuid,
                })
                if (!code) {
                    this.$store.commit('SET_TOKEN', data.accessToken);
                    await this.$store.dispatch('user/getUserInfo')
                    this.$utils.toast.success('登录成功')
                    setTimeout(() => {
                        this.reL('/pages/index/index')
                    }, 1500)
                }

            })
        },
        async getCode() {
            const {code, data} = await this.$api.shop.user.getCode({})
            if (!code) {
                this.codeDetails = data
            }
        }
    }
};
</script>
<style lang="scss" scoped>
.login {
    min-height: 100vh;
    background-color: #fff;

    .form-box {
        width: 100%;

        /deep/ .u-form {

            .form-item-box {
                width: 100%;
                height: 80rpx;
            }

            .u-form-item__body {
                padding: 10rpx 0;
            }
        }
    }

    .btn {
        width: 100%;
    }

    .chat {
        font-size: 28rpx;
        color: #323233;
        //position: absolute;
        //bottom: 30rpx;
        width: 100%;
        //left: 50%;
        margin-top: 200rpx;
        //transform: translateX(-50%);
    }
}
</style>
